Props and Data Passing Between Components in React Native

Course: React Native Training

Topic: Props and Data Passing Between Components

Course Link: React Native Training Course

Demo Link: Register for a Course Demo

JustAcademy Website: Visit JustAcademy

Reference: React Native Official Documentation

1. Introduction to Props and Data Passing

React Native applications are built using reusable components. Each component represents a specific part of the user interface, such as a profile card, navigation bar, product item, button, or user information section.

When an application contains multiple components, they often need to share information. For example, a parent component might store a user's name and pass it to a child component that displays a welcome message.

Props, short for properties, are used to pass data and configuration from one component to another. They allow developers to reuse components with different values instead of writing separate components for every situation.

In React Native, props can contain strings, numbers, booleans, arrays, objects, functions, and JSX elements. Data normally flows from parent components to child components. When a child needs to request a change to data managed by its parent, the parent can pass a callback function to the child.

Example

import React from 'react';
import { View, Text } from 'react-native';

function Greeting(props) {
  return (
    <View>
      <Text>Hello, {props.name}!</Text>
    </View>
  );
}

export default function App() {
  return (
    <View>
      <Greeting name="Amit" />
      <Greeting name="Priya" />
    </View>
  );
}

In this example, the Greeting component receives a name prop. The same component displays different messages depending on the value supplied by its parent.

2. Learning Objectives

After completing this topic, learners will be able to:

• Understand props and their role in React Native.
• Identify parent and child components.
• Pass strings, numbers, booleans, arrays, and objects through props.
• Receive props using the props object and destructuring.
• Set default values for optional props.
• Pass functions as props and handle child-to-parent communication.
• Pass JSX content using the children prop.
• Reuse components with different data.
• Understand one-way data flow and immutable props.
• Share state between components using callbacks and a common parent.
• Recognize prop drilling and understand when Context may help.
• Build reusable React Native components using practical examples.

3. What Are Props in React Native?

Props are inputs supplied to a component by the component that renders it. They determine what the component displays or how it behaves.

For example, a profile component might receive a name, age, location, and profile status through props. A reusable button might receive a title, disabled status, style, and press handler.

3.1 Basic Syntax

<ComponentName propName="value" />

For non-string values, use curly braces to pass JavaScript expressions.

<UserCard name="Rahul" age={25} isActive={true} />

Here:

• name receives a string.
• age receives a number.
• isActive receives a boolean.

3.2 Why Are Props Important?

• Reusability: The same component can display different data.
• Customization: Components can change their appearance or behavior based on inputs.
• Maintainability: Data and UI responsibilities can be separated.
• Consistency: Shared components can follow the same design and structure.
• Scalability: Large applications can be divided into smaller, manageable components.
• Data flow: Props provide a clear way to send information down a component hierarchy.

4. Understanding Parent and Child Components

A parent component renders another component inside its JSX. The rendered component is called a child component.

For example, an application screen can be the parent of a profile card, while the profile card can be the parent of a reusable user-name component.

4.1 Component Hierarchy

App
 └── ProfileScreen
      └── ProfileCard
           ├── UserName
           └── UserDetails

The parent can pass information to its direct children through props. If a deeply nested component needs information from an ancestor, intermediate components may forward that information or the application may use Context.

4.2 Example of Parent-to-Child Data Passing

import React from 'react';
import { View, Text } from 'react-native';

function UserDetails(props) {
  return (
    <View>
      <Text>Name: {props.name}</Text>
      <Text>City: {props.city}</Text>
    </View>
  );
}

export default function App() {
  return (
    <View>
      <UserDetails
        name="Neha"
        city="Mumbai"
      />
    </View>
  );
}

The App component provides the data, and the UserDetails component receives and displays it.

5. Receiving Props Through the Props Object

Functional components receive their props as an object argument. Each prop is available as a property of that object.

5.1 Accessing Individual Props

import React from 'react';
import { View, Text } from 'react-native';

function Student(props) {
  return (
    <View>
      <Text>Name: {props.name}</Text>
      <Text>Course: {props.course}</Text>
      <Text>Duration: {props.duration}</Text>
    </View>
  );
}

export default function App() {
  return (
    <View>
      <Student
        name="Ankit"
        course="React Native"
        duration="3 months"
      />
    </View>
  );
}

In this example, props.name, props.course, and props.duration retrieve the values passed by the parent.

5.2 When to Use the Props Object

Using the complete props object can be helpful when you need to access several properties or forward props to another component. However, destructuring is often easier to read when a component uses only a few known properties.

6. Receiving Props Using Destructuring

Destructuring is a JavaScript feature that extracts properties from an object into individual variables. React Native developers commonly use it to receive props.

6.1 Basic Destructuring

import React from 'react';
import { View, Text } from 'react-native';

function Greeting({ name, city }) {
  return (
    <View>
      <Text>Hello, {name}!</Text>
      <Text>Location: {city}</Text>
    </View>
  );
}

export default function App() {
  return (
    <View>
      <Greeting name="Riya" city="Pune" />
    </View>
  );
}

The expression ({ name, city }) extracts the name and city properties from the props object.

6.2 Props Object vs Destructuring

7. Passing Different Data Types Through Props

Props are not limited to strings. A component can receive many JavaScript data types depending on its requirements.

7.1 Passing String Props

function Welcome({ name }) {
  return <Text>Welcome, {name}!</Text>;
}

// Usage
<Welcome name="Aarav" />

String props are useful for names, titles, labels, descriptions, and messages.

7.2 Passing Number Props

function ProductPrice({ price }) {
  return <Text>Price: Rs. {price}</Text>;
}

// Usage
<ProductPrice price={1499} />

Curly braces allow the parent to pass a numeric value rather than a string.

7.3 Passing Boolean Props

function AccountStatus({ isActive }) {
  return (
    <Text>
      {isActive ? 'Account Active' : 'Account Inactive'}
    </Text>
  );
}

// Usage
<AccountStatus isActive={true} />

Boolean props are useful for status indicators, visibility, enabled states, and feature flags. A boolean prop can also use the shorthand <AccountStatus isActive /> to represent true.

7.4 Passing Array Props

import React from 'react';
import { View, Text } from 'react-native';

function SkillList({ skills }) {
  return (
    <View>
      {skills.map((skill) => (
        <Text key={skill}>{skill}</Text>
      ))}
    </View>
  );
}

export default function App() {
  const skills = ['JavaScript', 'React Native', 'Git'];

  return <SkillList skills={skills} />;
}

The array is passed as a JavaScript value. The child component uses map() to render each skill. In this example, each skill is unique, so the skill itself can serve as the key.

7.5 Passing Object Props

import React from 'react';
import { View, Text } from 'react-native';

function EmployeeCard({ employee }) {
  return (
    <View>
      <Text>Name: {employee.name}</Text>
      <Text>Role: {employee.role}</Text>
      <Text>Department: {employee.department}</Text>
    </View>
  );
}

export default function App() {
  const employee = {
    name: 'Karan',
    role: 'Developer',
    department: 'Mobile Applications'
  };

  return <EmployeeCard employee={employee} />;
}

Passing an object is useful when multiple related values belong together. The child should access the required properties instead of attempting to render the entire object directly.

7.6 Passing Function Props

Functions can be passed as props to let child components notify parents about events or request actions.

import React from 'react';
import { View, Text, Pressable } from 'react-native';

function CustomButton({ onPress, title }) {
  return (
    <Pressable onPress={onPress}>
      <Text>{title}</Text>
    </Pressable>
  );
}

export default function App() {
  const handlePress = () => {
    console.log('Button pressed');
  };

  return (
    <View>
      <CustomButton
        title="Submit"
        onPress={handlePress}
      />
    </View>
  );
}

The parent supplies the function through onPress. The child invokes it when the button is pressed.

8. Passing Props to Native React Native Components

React Native's built-in components also accept props. These props control their content, behavior, accessibility, layout, and appearance.

8.1 Text Component

<Text numberOfLines={2}>
  This description will display a maximum of two lines.
</Text>

8.2 Image Component

import React from 'react';
import { View, Image } from 'react-native';

export default function App() {
  const imageSource = {
    uri: 'https://reactnative.dev/docs/assets/p_cat1.png'
  };

  return (
    <View>
      <Image
        source={imageSource}
        style={{ width: 120, height: 120 }}
        accessibilityLabel="Cat illustration"
      />
    </View>
  );
}

The source, style, and accessibilityLabel props configure the image. Remote image loading also depends on network access and the image URL being valid.

8.3 Pressable Component

<Pressable
  onPress={handlePress}
  disabled={false}
  accessibilityRole="button"
>
  <Text>Continue</Text>
</Pressable>

Props allow developers to configure press handling, disabled behavior, and accessibility information without rebuilding the underlying component.

9. Default Values for Props

Default values are used when a prop is omitted or explicitly supplied as undefined. They help components behave predictably when optional data is not provided.

9.1 Default Values with Destructuring

import React from 'react';
import { View, Text } from 'react-native';

function Greeting({ name = 'Guest', city = 'Unknown' }) {
  return (
    <View>
      <Text>Hello, {name}!</Text>
      <Text>City: {city}</Text>
    </View>
  );
}

export default function App() {
  return (
    <View>
      <Greeting />
      <Greeting name="Meera" city="Delhi" />
    </View>
  );
}

The first greeting uses the default values. The second greeting uses the values provided by its parent.

9.2 Important Default Value Rules

• A default value is used if a prop is missing or its value is undefined.
• A default value does not replace an explicit null.
• Default values should be appropriate for the component's purpose.
• Use clear names and sensible defaults for optional props.

10. Props Are Read-Only

Props are read-only inputs. A child component should not directly modify the props it receives. Instead, it should display the values or use callback functions to request changes from the component that owns the data.

10.1 Incorrect Example

function User({ name }) {
  name = 'Updated Name'; // Do not modify props
  return <Text>{name}</Text>;
}

Reassigning a local parameter is not a valid way to update the parent's data. Mutating objects or arrays received through props is also discouraged because it can cause unpredictable behavior.

10.2 Correct Example

import React from 'react';
import { View, Text } from 'react-native';

function User({ name }) {
  return (
    <View>
      <Text>User Name: {name}</Text>
    </View>
  );
}

export default function App() {
  const userName = 'Updated Name';

  return <User name={userName} />;
}

The parent controls the value and passes it to the child. When the parent's value changes through React state, the child receives the updated prop on a subsequent render.

11. Passing Data from Parent to Child

Parent-to-child data passing is the standard direction of data flow in React Native. The parent defines or receives the data and supplies it to a child through props.

11.1 Example: User Profile

import React from 'react';
import { View, Text } from 'react-native';

function ProfileCard({ name, email, city }) {
  return (
    <View>
      <Text>Name: {name}</Text>
      <Text>Email: {email}</Text>
      <Text>City: {city}</Text>
    </View>
  );
}

export default function App() {
  return (
    <View>
      <ProfileCard
        name="Sonia"
        email="[email protected]"
        city="Mumbai"
      />
    </View>
  );
}

This structure separates the data provider from the presentation component. The profile card can be reused for multiple users by passing different values.

12. Passing Data from Child to Parent Using Callback Props

Props normally carry data downward. When a child needs to notify its parent about an event, the parent can pass a callback function as a prop. The child invokes the callback and supplies information through its arguments.

This pattern is commonly used for button presses, form submissions, selected items, search queries, and other user interactions.

12.1 Example: Child Sends a Message to Parent

import React, { useState } from 'react';
import { View, Text, Pressable } from 'react-native';

function Child({ onSendMessage }) {
  return (
    <Pressable
      onPress={() => onSendMessage('Hello from Child')}
    >
      <Text>Send Message</Text>
    </Pressable>
  );
}

export default function App() {
  const [message, setMessage] = useState('No message yet');

  const handleMessage = (newMessage) => {
    setMessage(newMessage);
  };

  return (
    <View>
      <Text>Parent Message: {message}</Text>
      <Child onSendMessage={handleMessage} />
    </View>
  );
}

How it works:

1. The parent defines the handleMessage function.
2. The parent passes it to the child as onSendMessage.
3. The child invokes the callback when the user presses the control.
4. The callback receives the message as an argument.
5. The parent updates its state with setMessage.
6. React renders the updated message in the parent and passes any updated props to its children.

13. Sharing State Between Components

When two or more components need to use the same changing data, the state can be stored in their closest common parent. This approach is called lifting state up.

The parent becomes the source of truth for the shared value and passes the current value and callback functions to the children that need them.

13.1 Example: Shared Counter

import React, { useState } from 'react';
import { View, Text, Pressable } from 'react-native';

function CounterDisplay({ count }) {
  return <Text>Current Count: {count}</Text>;
}

function CounterButton({ onIncrease }) {
  return (
    <Pressable onPress={onIncrease}>
      <Text>Increase Count</Text>
    </Pressable>
  );
}

export default function App() {
  const [count, setCount] = useState(0);

  const increaseCount = () => {
    setCount(previousCount => previousCount + 1);
  };

  return (
    <View>
      <CounterDisplay count={count} />
      <CounterButton onIncrease={increaseCount} />
    </View>
  );
}

The parent stores the counter state. One child displays the count, while another child requests an update through a callback.

13.2 Benefits of Lifting State Up

• Keeps shared data consistent between components.
• Provides a single source of truth for the value.
• Makes data flow easier to understand.
• Allows components to remain focused on their individual responsibilities.
• Reduces the risk of separate components maintaining conflicting copies of the same state.

14. Passing Data Between Sibling Components

Sibling components are components that share the same parent. They do not normally pass props directly to each other. Instead, their common parent manages the shared data and passes values or callbacks to each sibling.

Example

import React, { useState } from 'react';
import { View, Text, Pressable } from 'react-native';

function SelectButton({ onSelect }) {
  return (
    <Pressable onPress={() => onSelect('React Native')}>
      <Text>Select Course</Text>
    </Pressable>
  );
}

function SelectedCourse({ course }) {
  return <Text>Selected Course: {course}</Text>;
}

export default function App() {
  const [selectedCourse, setSelectedCourse] = useState('None');

  return (
    <View>
      <SelectButton onSelect={setSelectedCourse} />
      <SelectedCourse course={selectedCourse} />
    </View>
  );
}

Here, SelectButton sends the selected course to the parent. The parent updates its state and passes the new value to SelectedCourse.

15. Passing JSX Through the Children Prop

When one component is nested inside another component's opening and closing tags, the nested content is made available through the special children prop.

This pattern is useful for reusable cards, panels, modal content, layouts, and other wrapper components.

15.1 Example: Reusable Card

import React from 'react';
import { View, Text } from 'react-native';

function Card({ title, children }) {
  return (
    <View style={{
      padding: 16,
      margin: 10,
      borderWidth: 1,
      borderRadius: 8
    }}>
      <Text style={{ fontSize: 20, fontWeight: 'bold' }}>
        {title}
      </Text>
      {children}
    </View>
  );
}

export default function App() {
  return (
    <View>
      <Card title="Profile">
        <Text>Name: Anjali</Text>
        <Text>Role: Developer</Text>
      </Card>
    </View>
  );
}

The Card component receives the title through a normal prop and the nested JSX through children. This lets the wrapper display different content without needing to know its exact structure.

16. Passing Multiple Props to a Component

A component can receive multiple props to control its content and behavior. Grouping related values in an object can be helpful when many properties describe a single entity.

16.1 Example: Product Card

import React from 'react';
import { View, Text, Pressable } from 'react-native';

function ProductCard({ product, onAddToCart }) {
  return (
    <View style={{ padding: 16 }}>
      <Text>{product.name}</Text>
      <Text>Price: Rs. {product.price}</Text>
      <Text>Stock: {product.stock}</Text>
      <Pressable onPress={() => onAddToCart(product.id)}>
        <Text>Add to Cart</Text>
      </Pressable>
    </View>
  );
}

export default function App() {
  const product = {
    id: 'prod-101',
    name: 'Wireless Headphones',
    price: 2499,
    stock: 12
  };

  const handleAddToCart = (productId) => {
    console.log('Added product:', productId);
  };

  return (
    <View>
      <ProductCard
        product={product}
        onAddToCart={handleAddToCart}
      />
    </View>
  );
}

This example passes an object and a callback function. The product card displays the product details and notifies the parent when the user presses Add to Cart.

17. Forwarding Props to Another Component

Sometimes a component receives props that need to be passed to another component. Props can be forwarded individually or through JavaScript spread syntax.

17.1 Forwarding Selected Props

function UserDetails({ name, city }) {
  return (
    <View>
      <Text>{name}</Text>
      <Text>{city}</Text>
    </View>
  );
}

function ProfileScreen({ name, city }) {
  return (
    <View>
      <UserDetails name={name} city={city} />
    </View>
  );
}

17.2 Using Spread Syntax

function UserDetails({ name, city }) {
  return (
    <View>
      <Text>{name}</Text>
      <Text>{city}</Text>
    </View>
  );
}

function ProfileScreen(props) {
  return (
    <View>
      <UserDetails {...props} />
    </View>
  );
}

The spread syntax forwards the properties of the object as individual props. Use it thoughtfully because forwarding every property can make a component's inputs less explicit and may pass unintended props.

18. Prop Drilling and React Context

Prop drilling occurs when data must pass through several intermediate components that do not directly use the data, simply to reach a deeply nested component.

18.1 Example of Prop Drilling

function App() {
  const username = 'Rahul';

  return <Screen username={username} />;
}

function Screen({ username }) {
  return <Profile username={username} />;
}

function Profile({ username }) {
  return <UserName username={username} />;
}

function UserName({ username }) {
  return <Text>Welcome, {username}!</Text>;
}

The Screen and Profile components only forward the username to the next component.

18.2 When to Consider Context

React Context can make selected values available to components deeper in the component tree without forwarding the same prop through every intermediate component.

Context can be useful for shared information such as theme settings, locale preferences, or authenticated-user information. It is not necessary for every application or every prop.

18.3 Example: Using Context

import React, { createContext, useContext } from 'react';
import { View, Text } from 'react-native';

const UserContext = createContext(null);

function UserName() {
  const user = useContext(UserContext);

  return (
    <Text>Welcome, {user.name}!</Text>
  );
}

function Profile() {
  return (
    <View>
      <UserName />
    </View>
  );
}

export default function App() {
  const user = { name: 'Rahul' };

  return (
    <UserContext.Provider value={user}>
      <Profile />
    </UserContext.Provider>
  );
}

The UserName component reads the value through useContext. Intermediate components no longer need to pass the username manually.

19. Props vs State

Props and state both influence what a component displays, but they serve different purposes.

19.1 Example Combining Props and State

import React, { useState } from 'react';
import { View, Text, Pressable } from 'react-native';

function Counter({ initialCount }) {
  const [count, setCount] = useState(initialCount);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Pressable
        onPress={() => setCount(previous => previous + 1)}
      >
        <Text>Increase</Text>
      </Pressable>
    </View>
  );
}

export default function App() {
  return (
    <View>
      <Counter initialCount={5} />
    </View>
  );
}

The initialCount prop supplies the initial value for state. After initialization, the local counter state changes independently of the prop. If the parent later changes initialCount, the existing counter state does not automatically reset.

20. Common Mistakes When Passing Props

20.1 Incorrect Callback Example

<Pressable onPress={handleSubmit()}>
  <Text>Submit</Text>
</Pressable>

This calls handleSubmit during rendering. To invoke it when pressed, pass the function reference:

<Pressable onPress={handleSubmit}>
  <Text>Submit</Text>
</Pressable>

20.2 Incorrect Prop Mutation Example

function Product({ product }) {
  product.price = 500; // Avoid mutating props
  return <Text>{product.price}</Text>;
}

Instead, calculate a separate value or let the parent update its data through state.

function Product({ product }) {
  const displayPrice = 500;

  return (
    <Text>{displayPrice}</Text>
  );
}

This example demonstrates a separate display value. In a real application, if the product price is intended to change as application data, update the source state in the parent and pass the updated product down.

21. Best Practices for Props and Data Passing

• Use descriptive names such as userName, onSubmit, and isLoading.
• Keep data flow explicit and easy to follow.
• Use destructuring when it improves readability.
• Pass only the information a component actually needs.
• Use callbacks for child-to-parent communication.
• Keep shared state in the closest common parent when multiple components depend on it.
• Use default values for genuinely optional props.
• Never mutate props or nested objects received from a parent.
• Use stable keys when rendering arrays.
• Use Context selectively when prop drilling becomes inconvenient.
• Separate reusable presentation components from data-management logic where appropriate.
• Use TypeScript or suitable runtime validation when stronger prop contracts are needed.
• Document complex props, callbacks, and expected data structures.
• Avoid unnecessary spread syntax that hides a component's intended inputs.

22. Practical Project: Reusable Student Profile Cards

Objective: Build a React Native application that passes student information to reusable components and allows a child component to notify its parent when a student is selected.

Project Requirements

• Create an array of student objects.
• Display each student's name, course, and score.
• Pass each student object to a reusable student card component.
• Pass an event callback to each card.
• Display the selected student's name in the parent component.
• Use stable keys when rendering the list.

Complete Code

import React, { useState } from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';

function StudentCard({ student, onSelect }) {
  return (
    <View style={styles.card}>
      <Text style={styles.name}>{student.name}</Text>
      <Text>Course: {student.course}</Text>
      <Text>Score: {student.score}</Text>

      <Pressable
        style={styles.button}
        onPress={() => onSelect(student.name)}
      >
        <Text style={styles.buttonText}>Select Student</Text>
      </Pressable>
    </View>
  );
}

export default function App() {
  const [selectedStudent, setSelectedStudent] = useState('None');

  const students = [
    {
      id: 'student-1',
      name: 'Aarav',
      course: 'React Native',
      score: 88
    },
    {
      id: 'student-2',
      name: 'Priya',
      course: 'JavaScript',
      score: 92
    },
    {
      id: 'student-3',
      name: 'Rohan',
      course: 'Mobile Development',
      score: 79
    }
  ];

  return (
    <View style={styles.container}>
      <Text style={styles.heading}>Student Profiles</Text>

      <Text style={styles.selected}>
        Selected Student: {selectedStudent}
      </Text>

      {students.map((student) => (
        <StudentCard
          key={student.id}
          student={student}
          onSelect={setSelectedStudent}
        />
      ))}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16
  },
  heading: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 12
  },
  selected: {
    marginBottom: 12
  },
  card: {
    padding: 14,
    marginBottom: 12,
    borderWidth: 1,
    borderRadius: 8,
    borderColor: '#cccccc'
  },
  name: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 4
  },
  button: {
    padding: 10,
    marginTop: 10,
    backgroundColor: '#2457C5',
    borderRadius: 6
  },
  buttonText: {
    color: '#ffffff',
    textAlign: 'center'
  }
});

Project Explanation

1. Student data: The parent defines an array of student objects.
2. Reusable component: StudentCard displays any student supplied through its student prop.
3. Callback prop: onSelect allows the child to send the selected student's name to the parent.
4. State: selectedStudent stores the current selection.
5. Rendering: map() creates a card for each student.
6. Unique keys: Each card uses the student's unique ID.
7. UI update: Selecting a student updates the parent's state and displays the selected name.

23. Practice Exercises

Exercise 1: Greeting Component

Create a reusable greeting component that accepts a person's name and city through props.

Exercise 2: Product Card

Create a product card that accepts a product name, price, category, and availability status.

Exercise 3: User Profile

Pass a user object containing a name, email, and phone number to a profile component and display each property.

Exercise 4: Button Callback

Create a child button component that calls a parent function when pressed.

Exercise 5: Sibling Communication

Build two sibling components: one for selecting a course and another for displaying the selected course. Manage the shared selection in their parent.

Exercise 6: Children Prop

Create a reusable card component that accepts a title prop and nested JSX through children.

Exercise 7: Prop Drilling

Create a three-level component hierarchy that passes a username through props. Then refactor it to use React Context.

24. Interview Questions and Answers

Q1. What are props in React Native?

Answer: Props are read-only inputs used to pass data and configuration from a parent component to a child component.

Q2. What is the full form of props?

Answer: Props stands for properties.

Q3. How do you pass props to a component?

Answer: Pass values as attributes in JSX, for example, <Greeting name="Amit" />.

Q4. How does a functional component receive props?

Answer: A functional component receives a props object as its argument. Developers can access properties through props.name or destructure them in the parameter list.

Q5. Can props contain objects and arrays?

Answer: Yes. Props can contain strings, numbers, booleans, arrays, objects, functions, and other suitable JavaScript values.

Q6. Can a child component change its props?

Answer: No. Props should be treated as read-only. The child can request a change by invoking a callback supplied by its parent.

Q7. How can a child send data to its parent?

Answer: The parent passes a callback function as a prop. The child calls the function and supplies the data as an argument.

Q8. What is lifting state up?

Answer: Lifting state up means moving shared state to the closest common parent of the components that need to use or update it.

Q9. What is the children prop?

Answer: The children prop contains nested content placed between a component's opening and closing tags.

Q10. What is prop drilling?

Answer: Prop drilling occurs when data is passed through several intermediate components just to reach a deeply nested component.

Q11. How can React Context help?

Answer: Context makes selected values available to descendant components without explicitly passing the same prop through every intermediate component.

Q12. What is the difference between props and state?

Answer: Props are inputs received from a parent, while state is data managed by a component or its state owner and updated through state-management mechanisms.

Q13. How do you set a default prop value?

Answer: Use a default value in destructuring, such as function Greeting({ name = 'Guest' }).

Q14. Why are keys important when passing arrays to components?

Answer: Keys help React identify elements in rendered lists across updates and should be stable and unique among siblings.

Q15. Can functions be passed as props?

Answer: Yes. Functions are often passed as callback props for button presses, form submissions, selections, and child-to-parent communication.

25. Quick Revision Checklist

• Props means properties.
• Props pass data and configuration into components.
• Data generally flows from parent to child.
• Use props.name or destructuring to access values.
• Use curly braces to pass JavaScript values in JSX.
• Props can contain strings, numbers, booleans, arrays, objects, and functions.
• Props should be treated as read-only.
• Use callback props when children need to notify parents.
• Lift shared state to the closest common parent.
• Use children to pass nested JSX.
• Use Context when deeply shared data makes prop drilling inconvenient.
• Use default values for optional props.
• Provide stable keys for rendered lists.
• Keep components reusable and their data flow clear.

26. Conclusion

Props and data passing are essential concepts in React Native because they allow components to communicate while remaining reusable and organized. Parent components pass values through props, child components receive and display those values, and callback functions allow children to notify parents about events.

By understanding different prop types, destructuring, default values, callback props, shared state, children, and Context, developers can build structured applications with predictable data flow and reusable UI components.

Continue learning with the React Native Training Course, visit the JustAcademy website, or register for a course demo.